<template>
  <ModuleTitle title="积分Top5排名">
    <div class="w-full h-full flex flex-col justify-between">
      <div 
        v-for="(item, index) in pointsData" 
        :key="index" 
        class="w-full mb-10px last:mb-0"
      >
        <div class="flex justify-between items-center mb-4px">
          <span class="text-14px text-[#739DC2]">{{ item.name }}</span>
          <span class="text-16px text-[#66BAF8]">{{ formatNumber(item.points) }}</span>
        </div>
        <div class="w-full h-8px bg-[#386479] rounded-4px overflow-hidden">
          <div 
            class="h-full rounded-4px" 
            :style="{ 
              width: `${(item.points / maxPoints) * 100}%`,
              backgroundColor: item.color 
            }"
          ></div>
        </div>
      </div>
    </div>
  </ModuleTitle>
</template>

<script setup>
import { ref, computed} from 'vue'
import ModuleTitle from './ModuleTitle.vue'
import { useAutoRefresh } from '@/hooks/useAutoRefresh'

useAutoRefresh(fetchData)

const pointsData = ref([
  { name: '用户A', points: 12500, color: '#87F7C7' },
  { name: '用户B', points: 9800, color: '#87F7C7' },
  { name: '用户C', points: 7500, color: '#87F7C7' },
  { name: '用户D', points: 6200, color: '#87F7C7' },
  { name: '用户E', points: 4800, color: '#87F7C7' }
])


// 计算最大积分值用于比例计算
const maxPoints = computed(() => {
  return Math.max(...pointsData.value.map(item => item.points))
})

// 千分位格式化函数
const formatNumber = (num) => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}


// 组件自己的数据获取方法
function fetchData() {
  console.log('执行组件数据刷新:onlinePopulation')
  // 这里调用API获取数据
}
</script>

<style scoped>
/* 不需要额外样式，全部使用unocss */
</style>
